import { Col, Form, Image, Input, message, Row, Select } from 'antd';
import an58 from '@mmstudio/an000058';
import React, { useState } from 'react';
import AddButton from '../../../components/addbutton';
import { Message as M1, Result as R1 } from '../../api/admin/users/add.api';
import api from '../../../atoms/api';
import UploaderDlg from '../../../components/uploaderdlg';

export default function Add() {
	const [d, setd] = useState({} as M1);
	return <>
		<AddButton dlgtitle='用户管理' onSave={async () => {
			if (!d) {
				return '缺少必要的参数';
			}
			if (!d.userid) {
				return '用户名不能为空，请填写完整!';
			}
			if (!d.name) {
				return '姓名不能为空，请填写完整!';
			}
			if (!d.phone) {
				return '手机号不能为空，请填写完整!';
			}
			if (!d.email) {
				return '邮箱不能为空，请填写完整!';
			}
			//验证手机合法
			const reg_phone = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
			if (!reg_phone.test(d.phone)) {
				return '手机号格式错误!';
			}
			//验证邮箱合法
			const reg_email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
			if (!reg_email.test(d.email)) {
				return '邮箱格式错误!';
			}
			const res = await an58<R1, M1>(api['/api/admin/users/add'], 'post', d);
			if (res.ok === true) {
				return true;
			}
			return res.message;
		}}>
			<Row>
				<Col>
					<Form.Item required label="用户名:" labelCol={{ span: 6 }}>
						<Input placeholder='请输入用户名' maxLength={25} value={d.userid} onChange={(e) => {
							setd({
								...d,
								userid: e.target.value.trim()
							});
						}} />
					</Form.Item>
					<Form.Item required label="姓名:" labelCol={{ span: 6 }}>
						<Input placeholder='请输入姓名' maxLength={25} value={d.name} onChange={(e) => {
							setd({
								...d,
								name: e.target.value.trim()
							});
						}} />
					</Form.Item>
					<Form.Item required label="性别:" labelCol={{ span: 6 }}>
						<Select
							showSearch
							optionFilterProp="children"
							filterOption={(input, option) => {
								return option.children.indexOf(input) >= 0;
							}}
							value={d.sex || 1}
							onChange={(e) => {
								setd({
									...d,
									sex: e
								});
							}} >
							<Select.Option value={1}>男</Select.Option>
							<Select.Option value={2}>女</Select.Option>
							<Select.Option value={0}>未知</Select.Option>
						</Select>
					</Form.Item>
				</Col>
				<Col offset={2}>
					<UploaderDlg key={Date.now()} type='image' multiple={false} onChange={(file) => {
						setd({
							...d,
							picture: file
						});
					}} >
						<Image src={d.picture || '/images/headpic.png'} preview={false} height={145}>
						</Image>
					</UploaderDlg>
				</Col>
			</Row>
			<Form.Item required label="手机号:" labelCol={{ span: 3 }} >
				<Input placeholder='请输入手机号' maxLength={11} value={d.phone} onChange={(e) => {
					setd({
						...d,
						phone: e.target.value.trim()
					});
				}} />
			</Form.Item>
			<Form.Item required label="邮箱:" labelCol={{ span: 3 }} >
				<Input placeholder='请输入邮箱' maxLength={30} value={d.email} onChange={(e) => {
					setd({
						...d,
						email: e.target.value.trim()
					});
				}} />
			</Form.Item>
		</AddButton>
		<style jsx>{`
		.ta{
width:100%;
height:10rem;
}
.da{
width:100%;
height:10rem;
}
		`}</style>
	</>;
}

